const keywords = document.getElementById("keywords")
keywords.addEventListener("input", _.debounce(debounce, 500))

function debounce(e) {
    /* 
        0. 当我们一旦输入内容的时候,显示content区域
        1. 获取storage里面存储的学生信息
        2. 获取输入的文本值
        3. 过滤出文本值
    */
    const msg = e.target.value.trim()
    const content = document.querySelector(".search>.content")
    if (msg.length) {
        //显示content区域
        content.style.display = "block"
    } else {
        //隐式content区域
        content.style.display = "none"
        return;
    }
    //准备显示了
    const studentInfo = JSON.parse(localStorage.getItem("studentInfo"))
    const result = studentInfo.filter(item => {
        return item.sname.includes(msg)
    })
    console.log(result);
    //渲染
    content.innerHTML = "";
    result.forEach(item => {
        let str = `
                <li onclick="window.location.href = './detail.html?id=${item.sid}'">
                    <div class="left">
                        <img data-src="${item.url}" class="lazyload" />
                    </div>
                    <div class="right">
                        <p>姓名: ${item.sname}</p>
                        <p>性别: ${item.gender}</p>
                        <p>邮箱: ${item.email}</p>
                    </div>
                </li>
                `
        content.innerHTML += str;
    })
}